<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>新用户登记</title>
    <link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../../element-theme/blue/index.css">
    <link rel="stylesheet" href="../../css/aui-blue.min.css">
</head>
<body>
<div v-cloak class="aui-page page-login">
    <div class="login-wrapper">
        <!-- page-header -->
        <header class="aui-page-header">
            <h2 class="aui-brand">XX医院</h2>
            <ul class="aui-intro">
                <li>新用户登记</li>
            </ul>
        </header>
        <!-- page-main -->
        <main class="aui-page-main">
            <h3 class="login-title">登记</h3>
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
                     status-icon>
                <el-form-item prop="jobnum">
                    <el-input v-model="dataForm.jobnum" placeholder="工号">
              <span slot="prefix" class="el-input__icon">
                <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
              </span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="dataForm.password" type="password" placeholder="密码">
              <span slot="prefix" class="el-input__icon">
                <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
              </span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <el-input v-model="dataForm.confirmPassword" type="password" placeholder="确认密码">
              <span slot="prefix" class="el-input__icon">
                <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
              </span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                    <el-row :gutter="20">
                        <el-col :span="14">
                            <el-input v-model="dataForm.captcha" placeholder="验证码">
                  <span slot="prefix" class="el-input__icon">
                    <svg class="icon-svg" aria-hidden="true">
                      <use xlink:href="#icon-safetycertificate"></use>
                    </svg>
                  </span>
                            </el-input>
                        </el-col>
                        <el-col :span="10" class="login-captcha">
                            <div class="ValidCode disabled-select"
                                 @click="refreshCode">
                                <!--                  <span v-for="(item, index) in dataForm.codeList" :key="index"-->
                                <!--                    :style="getStyle(item)">{{item.code}}</span>-->
                                <el-col :span="35" class="login-captcha">
                                    <img :src=captchacode>
                                    <!--                    <img src = "-->
                                    <!--">-->
                                </el-col>


                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
                <!--          <el-form-item prop="smsCaptcha">-->
                <!--            <el-row :gutter="20">-->
                <!--              <el-col :span="14">-->
                <!--                <el-input v-model="dataForm.smsCaptcha" placeholder="短信验证码">-->
                <!--                  <span slot="prefix" class="el-input__icon">-->
                <!--                    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>-->
                <!--                  </span>-->
                <!--                </el-input>-->
                <!--              </el-col>-->
                <!--              <el-col :span="10">-->
                <!--                <el-button class="w-100">获取验证码</el-button>-->
                <!--              </el-col>-->
                <!--            </el-row>-->
                <!--          </el-form-item>-->
                <el-form-item prop="agreement" size="mini">
                    <div class="t-left">
                        <el-checkbox v-model="dataForm.agreement">已阅读并同意</el-checkbox>
                        <a href="#">服务条款</a>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button class="w-100" type="primary" @click="dataFormSubmitHandle()">新用户登记</el-button>
                </el-form-item>
            </el-form>
            <p class="login-guide">已经登记过？<a href="login.html">立即登录</a></p>
        </main>
        <!-- page-footer -->
        <footer class="aui-page-footer">

            <p>MingHsZzz</p>
        </footer>
    </div>
</div>
<script src="../../temp/vue-2.5.17/vue.min.js"></script>
<script src="../../temp/element-2.4.5/index.js"></script>
<script src="../../icons/iconfont.js"></script>
<script src="../../js/jquery.min.js"></script>
<script>Vue.prototype.$ELEMENT = {size: 'medium'};</script>
<script>
    (function () {
        var vm = window.vm = new Vue({
            el: '.aui-page',
            data: function () {
                // 验证码自定义验证规则
                const validateVerifycode = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('验证码不能为空'))
                    } else {
                        callback()
                    }
                }

                const validateConfirm = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('密码不能为空'))
                    } else if (value !== this.dataForm.password) {
                        callback(new Error('两次密码须一致'))
                    } else {
                        callback()
                    }
                }

                const valideteAgree = (rule, value, callback) => {
                    if (!value) {
                        callback(new Error('请先阅读并勾选协议'));
                    } else {
                        callback();
                    }
                }

                return {
                    captchacode: "",
                    dataForm: {
                        jobnum: 'q',
                        password: 'q',
                        confirmPassword: 'q',
                        captcha: 'q',
                        agreement: true,
                    },
                    dataRule: {
                        jobnum: [
                            {required: true, message: '必填项不能为空', trigger: 'blur'}
                        ],
                        password: [
                            {required: true, message: '必填项不能为空', trigger: 'blur'}
                        ],
                        confirmPassword: [
                            {required: true, trigger: 'blur', validator: validateConfirm}
                        ],
                        captcha: [
                            {required: true, trigger: 'blur', validator: validateVerifycode}
                        ],
                        agreement: [
                            {required: true, trigger: 'change', validator: valideteAgree}
                        ]
                    }
                }
            },

            props: {
                width: {
                    type: String,
                    default: '100%'
                },
                height: {
                    type: String,
                    default: '34px'
                },
                length: {
                    type: Number,
                    default: 4
                }
            },

            beforeCreate() {
                vm = this;
            },

            mounted() {
                this.getCaptcha()

            },

            methods: {
                //获取验证码
                getCaptcha() {
                    $.get("/before/getcaptcha").then(res => {
                        vm.captchacode = "data:image/png;base64," + res.data;
                    })
                },
                //刷新验证码
                refreshCode() {
                    this.getCaptcha()
                },
                dataFormSubmitHandle() {
                    // console.log(vm.dataForm)
                    vm.$refs['dataForm'].validate(function (valid) {
                        var userdata = "jobnum="+vm.dataForm.jobnum + "&password="+vm.dataForm.password+"&captcha="+vm.dataForm.captcha

                        if (valid) {
                            $.ajax({
                                url: "/before/register",
                                type: "POST",
                                // contentType: "application/json",
                                data: userdata
                            }).then(res => {
                                console.log(res)
                                if (res.code == 200) {
                                    vm.$message(
                                        {
                                            message: res.msg,
                                            type: "success"
                                        }
                                    )
                                    setTimeout(() => {
                                        window.location.href = "login.html"
                                    }, 2000)
                                } else if (res.code == 400) {
                                    vm.$message({
                                        type: "error",
                                        message: res.msg
                                    })
                                } else {
                                    vm.$message({
                                        type: "error",
                                        message: res.msg
                                    })
                                }


                            })


                        }
                    });
                },

                //刷新验证码
                refreshCode() {
                    this.getCaptcha()
                },

            }
        });
    })();
</script>
</body>
</html>
